<template>
	<view>
		<view class="content" v-if="is==1">
			
			<view class="mem-images">
				<image :src="data.head_portrait ? data.head_portrait : '../../../static/logo.png'" class="mem-image" mode="aspectFill"></image>
			</view>
			<view class="mem-name">
				{{data.realname ? data.realname : data.nickname}}
			</view>
			<view class="mem-tel">
				{{data.mobile}}
			</view>
			<view class="_tab">
				<text class="mem_tab" v-if="data.position">{{data.position}}</text> 
				<!-- <text class="mem_tab_agent" v-if="data.agent">{{data.agent}}</text> -->
				<text class="mem_tab_store" v-if="data.store">{{data.store}}</text> 
			</view>
			<view class="tips" v-if="data.grade_tips !== ''">
				{{data.grade_tips}}
			</view>
			<view class="gu-list">
				<view class="gu-li active" v-if="data.total > 0">
					您所享有的总预期股份为：<text class="gu-li-num "> {{data.total}} </text>  股
				</view>
				<view class="gu-li"  v-if="data.staff > 0">
					员工预期股份为：<text class="gu-li-num"> {{data.staff}} </text>  股
				</view>
				<view class="gu-li"  v-if="data.proxy > 0">
					代理股份为：<text class="gu-li-num"> {{data.proxy}} </text>  股
				</view>
				<view class="gu-li"  v-if="data.reward > 0">
					裂变股份为：<text class="gu-li-num"> {{data.reward}} </text>  股
				</view>
				<view class="gu-li"  v-if="data.credit > 0">
					记功股份为：<text class="gu-li-num"> {{data.credit}} </text>  股
				</view>
				<view class="gu-li"  v-if="data.grade > 0">
					业绩股份为：<text class="gu-li-num"> {{data.grade}} </text>  股
				</view>
				<view class="gu-li"  v-if="data.store > 0">
					门店股份为：<text class="gu-li-num"> {{data.store}} </text>  股
				</view>
				
				<view class="gu-li">
					记功 :{{data.credit_big}}大功{{data.credit_little}}小功{{data.credit_fraction}}分
				</view>
				<view class="gu-li">
					记过 :{{data.fault_big}}大过{{data.fault_little}}小过{{data.fault_fraction}}分
				</view>
			</view>
			
			<view class="btn" @click="open()">
				点击查看明细
			</view>
		</view>
		<view class="contents" v-if="is == 2">
			
		</view>
		<view class="mask" v-if="show">
			<view class="shares-view">
				<view class="shares-title">
					请输入密码查看
				</view>
				<view class="shares-input">
					<input type="text" password v-model="password" placeholder="请输入密码" />
				</view>
				<view class="shares-btn" @click="checkpwd()">
					确认
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	
	import {
	    mapState,
	    mapMutations
	} from 'vuex'
	
	export default {
		
		computed: {
		    ...mapState(['token'])
		},
		data() {
			return {
				data: {},
				is: 0,
				show: false,
				password: ''
			}
		},
		onLoad(event){
			if(this.token){
				this.getinfo()
			}
		},
		methods: {
			...mapMutations(['getNetworkType','vuexRequest']),
			// 验证
			checkpwd(){
				
				if(this.password == ''){
					uni.showToast({
						icon: 'none',
						title: '请输入密码',
						position:'bottom'
					})
					return !1
				}
				
				this.vuexRequest({
					url: '/api/addons/execute?addon=os-equity&route=equity/check-pwd&access-token=' + this.token,
					method: 'POST',
					data: {password:this.password},
					success: (res)  => {
						this.show = false
						this.is = 1
					},
					fail: (err)  => {
						uni.showToast({
							icon: 'none',
							title: err.data.message,
							position:'bottom'
						})
					},
				})
			},
			// 详情信息
			getinfo(){
				this.vuexRequest({
					url: '/api/addons/execute?addon=os-equity&route=equity/index&access-token=' + this.token,
					method: 'POST',
					data: {},
					success: (res)  => {
						this.data = res.data.data
						if(this.data.total > 0){
							//this.is = 1
							this.openPassword()
						}else{
							this.is = 2
						}
					},
					fail: (err)  => {
						uni.showToast({
							icon: 'none',
							title: err.data.message,
							position:'bottom'
						})
					},
				})
			},
			open(){
				uni.navigateTo({
					url:"../shares-list/shares-list"
				})
			},
			openPassword(){
				this.show = true
			}
		}
	}
</script>

<style>
	
	.contents{
		background-image: url('http://app.aibafang.com/attachment/images/2019/11/29/image_157502362254569710.jpg');
		background-size: 100% 100%;
		position: absolute;
		width: 750rpx;
		height: 100%;
		bottom: 0;
		top: 0;
		left: 0;
		right: 0;
	}
	.content{
		background-image: url('http://app.aibafang.com/attachment/images/2019/11/29/image_157502357656579710.jpg');
		background-size: 100% 100%;
		position: absolute;
		width: 750rpx;
		height: 100%;
		bottom: 0;
		top: 0;
		left: 0;
		right: 0;
	}
	.mem-images{
		padding: 25rpx 25rpx 0  25rpx;
		text-align: center;
	}
	.mem-image{
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
	}
	.btn{
		width: 90%;
		margin: 90rpx auto 0 auto;
		line-height: 80rpx;
		background: #007AFF;
		color: #FFFFFF;
		border-radius: 10rpx;
		text-align: center;
		font-size: 34rpx;
	}
	.gu-list{
		width: 90%;
		margin: 0 auto;
		padding-top: 25rpx;
	}
	.gu-li{
		background: #32c1e4;
		line-height: 80rpx;
		text-align: center;
		font-size: 34rpx;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		/* color: #FFFFFF; */
	}
	.gu-li-num{
		margin: 0 25rpx;
		
	}
	.gu-li.active{
		background: #e44240;
	}
	.mem-name{
		text-align: center;
		font-size: 30rpx;
	}
	.mem-tel{
		text-align: center;
		font-size: 28rpx;
	}
	._tab {
		text-align: center;
		
	}
	._tab text{
		margin: 0 10rpx;
		color: #FFFFFF;
		padding: 0 5rpx;
	}
	.mem_tab {
		background: #1e9fff;

	}
	.mem_tab_agent{
		background: #009688;
	}
	.mem_tab_store{
		background: #ff5722;
	}
	.tips{
		color: #e83e41;
		padding: 25rpx;
		text-align: center;
	}
	
	.mask{
		position: fixed;
		background-color: rgba(0,0,0,.5);
		width: 750rpx;
		height: 100%;
		bottom: 0;
		top: 0;
		left: 0;
		right: 0;
		z-index: 10;
	}
	.shares-view{
		background-color: #FFFFFF;
		border-radius: 20rpx;
		width: 500rpx;
		height: 600rpx;
		position: absolute;
		left: 50%;
		top: 50%;
		margin:  -400rpx 0 0 -250rpx;
	}
	
	.shares-title{
		text-align: center;
		font-size: 32rpx;
		color: #333333;
		font-weight: 600;
		line-height: 120rpx;
	}
	.shares-input{
		padding: 60rpx 25rpx 25rpx 25rpx;
		
	}
	.shares-input input{
		font-size: 24rpx;
		background-color: #F8F8F8;
		height: 50rpx;
		padding: 10rpx 10rpx;
	}
	
	.shares-btn{
		text-align: center;
		font-size: 28rpx;
		color: #FFFFFF;
		background-color: #e83e41;
		margin: 80rpx 25rpx 0 25rpx;
		line-height: 80rpx;
		border-radius: 10rpx;
	}
</style>
